<template>
  <el-dialog
    :model-value="dialogDetails"
    width="40%"
    title="空间详情"
    :before-close="handleClose"
    @open="handleDialogOpen"
    @closed="handleDialogClosed"
    destroy-on-close
  >
    <div v-loading="loading" element-loading-text="加载中...">
      <el-divider class="custom-divider" />

      <!-- 详情表单内容 -->
      <el-form :model="form" label-width="120px">
        <el-form-item label="空间名称：">
          <div class="space-info-row">
            <el-input v-model="form.name" disabled style="width: 470px" />
            <el-input v-model="form.city" disabled style="width: 180px" />
          </div>
        </el-form-item>

        <el-form-item label="空间地址：">
          <el-input v-model="form.destName" disabled />
        </el-form-item>

        <el-form-item label="地点坐标：">
          <el-input :model-value="coordinates" disabled />
        </el-form-item>

        <el-form-item label="封面图片：">
          <div class="image-preview" v-if="form.coverUrl">
            <el-image :src="form.coverUrl" fit="cover" />
          </div>
          <span v-else>暂无图片</span>
        </el-form-item>

        <el-form-item label="空间平面：">
          <div class="image-preview" v-if="form.floorPlanUrl">
            <el-image :src="form.floorPlanUrl" fit="cover" />
          </div>
          <span v-else>暂无图片</span>
        </el-form-item>

        <el-form-item label="空间介绍：">
          <el-input v-model="form.intro" type="textarea" :rows="4" disabled />
        </el-form-item>

        <el-form-item label="排序：">
          <el-input-number
            v-model="form.orderLevel"
            disabled
            controls-position="right"
          />
        </el-form-item>

        <el-form-item label="设施：">
          <div class="facility-list">
            <el-tag
              v-for="item in facilitiesListAll"
              :key="item.facilityId"
              class="facility-tag"
              type="info"
              effect="plain"
            >
              {{ item.name }}
            </el-tag>
            <span v-if="!facilitiesListAll.length">暂无设施</span>
          </div>
        </el-form-item>

        <el-form-item label="视频：">
          <div class="video-list">
            <el-tag
              v-for="item in videoListAll"
              :key="item.id"
              class="video-tag"
              type="info"
              effect="plain"
            >
              {{ item.title }}
            </el-tag>
            <span v-if="!videoListAll.length">暂无视频</span>
          </div>
        </el-form-item>

        <el-form-item label="活动公告：">
          <el-input
            v-model="form.todayAnnouncement"
            type="textarea"
            :rows="4"
            disabled
          />
        </el-form-item>
        <!-- 活动节目单 -->
        <el-form-item label="活动节目单：">
          <div class="qrcode-section">
            <el-table
              :data="programmeData"
              style="width: 100%"
              border
              stripe
              fit
              empty-text="暂无数据"
              show-header
              size="small"
              element-loading-text="Loading..."
              :header-cell-style="{ background: '#e7e1fb' }"
              max-height="200px"
            >
              <el-table-column
                prop="typeName"
                label="活动标题"
                min-width="120"
                show-overflow-tooltip
              />
              <el-table-column label="封面图片" min-width="120" align="center">
                <template #default="scope">
                  <div class="qrcode-image">
                    <el-image
                      v-if="scope.row.imgUrls"
                      :src="scope.row.imgUrls"
                      fit="contain"
                      style="width: 60px; height: 60px"
                      :preview-src-list="[scope.row.imgUrls]"
                      :initial-index="0"
                    />
                    <span v-else>暂无图片</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="activityStatus"
                label="状态"
                min-width="120"
                show-overflow-tooltip
              />
              <el-table-column
                prop="releaseTime"
                label="创建时间"
                min-width="120"
                show-overflow-tooltip
              />
              <el-table-column
                prop="initiatorUid"
                label="创建人"
                min-width="120"
                show-overflow-tooltip
              />
            </el-table>
          </div>
        </el-form-item>
        <!-- 二维码信息 -->
        <el-form-item label="加入二维码：">
          <div class="qrcode-section">
            <el-table
              :data="qrcodeData"
              style="width: 100%"
              border
              stripe
              fit
              empty-text="暂无数据"
              show-header
              size="small"
              element-loading-text="Loading..."
              :header-cell-style="{ background: '#e7e1fb' }"
              max-height="200px"
            >
              <el-table-column
                prop="codeTitle"
                label="底部文字信息"
                min-width="120"
                show-overflow-tooltip
              />
              <el-table-column
                label="二维码图片"
                min-width="120"
                align="center"
              >
                <template #default="scope">
                  <div class="qrcode-image">
                    <el-image
                      v-if="scope.row.url"
                      :src="scope.row.url"
                      fit="contain"
                      style="width: 60px; height: 60px"
                      :preview-src-list="[scope.row.url]"
                      :initial-index="0"
                    />
                    <span v-else>暂无图片</span>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-form-item>

        <el-form-item label="状态：">
          <el-radio-group v-model="form.state" disabled>
            <el-radio :value="0">展示</el-radio>
            <el-radio :value="1">隐藏</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancel">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup name="DetailsSpaceDialog">
import { ref, computed } from 'vue';
import { getSpaceDetails } from '@/api/Venue/space';

const props = defineProps({
  dialogDetails: {
    type: Boolean,
  },
  DetailsSpaceId: {
    type: String,
  },
});

const emit = defineEmits(['cancel']);
// 表单数据
const form = ref({
  name: '',
  city: '',
  destName: '',
  destLongitude: '',
  destLatitude: '',
  coverUrl: '',
  floorPlanUrl: '',
  facilityIdList: [],
  mediaIdList: [],
  todayAnnouncement: '',
  intro: '',
  orderLevel: 0,
  state: '',
  province: '',
});
// 其他数据
const qrcodeData = ref([]);
const facilitiesListAll = ref([]);
const videoListAll = ref([]);
// 活动节目单
const programmeData = ref([]);
// 添加加载状态
const loading = ref(false);

// 计算坐标显示
const coordinates = computed(() => {
  if (form.value.destLongitude && form.value.destLatitude) {
    return `${form.value.destLongitude},${form.value.destLatitude}`;
  }
  return '';
});

// 获取空间详情数据
const getDetails = async () => {
  if (!props.DetailsSpaceId) return;
  loading.value = true;
  try {
    const res = await getSpaceDetails(props.DetailsSpaceId);
    if (res.data.code === 200) {
      const detailData = res.data.data;
      programmeData.value = detailData.activityList || [];
      // 处理基础数据
      form.value = {
        ...detailData,
        facilityIdList:
          detailData.facilityList?.map((item) => item.facilityId) || [],
        mediaIdList: detailData.mediaList?.map((item) => item.id) || [],
      };

      // 处理设施和视频列表
      facilitiesListAll.value = detailData.facilityList || [];
      videoListAll.value = detailData.mediaList || [];

      // 处理二维码列表
      qrcodeData.value = detailData.qrCodeList || [];
    }
  } catch (error) {
    console.error('获取详情数据失败:', error);
    ElMessage.error('获取详情数据失败');
  } finally {
    loading.value = false;
  }
};

// 对话框打开时的处理
const handleDialogOpen = async () => {
  await getDetails();
};

// 对话框关闭时的处理
const handleDialogClosed = () => {};

// 处理取消
const handleCancel = () => {
  emit('cancel');
};

// 处理关闭
const handleClose = () => {
  handleCancel();
};
</script>

<style lang="scss" scoped>
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}

.image-preview {
  width: 120px;
  height: 120px;
  border: 1px solid #dcdfe6;
  border-radius: 8px;
  overflow: hidden;
  background-color: #f5f7fa;

  .el-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  &:empty::after {
    content: '暂无图片';
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: #909399;
    font-size: 14px;
  }
}

.space-info-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

:deep(.el-dialog__body) {
  padding-top: 10px;
  padding-bottom: 10px;
}

:deep(.custom-divider) {
  margin: 0;
  margin-bottom: 20px;
}

:deep(.el-dialog__header) {
  padding-bottom: 10px;
  margin-right: 0;
}

.qrcode-section {
  width: 100%;

  :deep(.el-table) {
    width: 100% !important;
  }

  .qrcode-image {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;

    .el-image {
      border-radius: 4px;
      border: 1px solid #dcdfe6;
      background-color: #fff;
      padding: 4px;

      &:hover {
        border-color: #409eff;
      }
    }
  }
}

.facility-list,
.video-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 32px;
  align-items: center;
}

.facility-tag,
.video-tag {
  margin-right: 8px;
  margin-bottom: 8px;
}

:deep(.el-form-item__content) {
  min-height: 32px;
}

:deep(.el-input.is-disabled .el-input__wrapper) {
  background-color: #f5f7fa;
}

:deep(.el-textarea.is-disabled .el-textarea__inner) {
  background-color: #f5f7fa;
}
</style>
